<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/com.css">
    <title></title>
</head>
<body>
<div class="my-head">
    <div class="container">
        <div class="col-sm-4">
            <img  class="index-log" src="../../images/index-logo.png">
        </div>
        <div class="col-sm-4 col-sm-push-4 index-hr">
            <div class="col-xs-6 col-xs-pull-1" >
                <form class="form-horizontal">
                    <div class="form-group index-hr-pd">
                        <div class="input-group ver-cen-pad" id="head-input-box">
                            <label for="index-search"class="sr-only">Search</label>
                            <input id="index-search" class="form-control" type="text">
                            <div class="input-group-btn index-search-icon"><button type="submit" class="btn" ><img class="search-btn" src="../../images/search-icon.png"></button></a></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-6 index-hr-pd ab-l">
                <ul class="nav nav-tabs user-login-box">
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            <img src="../../images/user-hd-img.png">
                            <span id="user-name">王晓华</span>
                            <span class="caret"></span></span>
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="list-group-item user-center-page">个人主页</a>
                            <a href="#" class="list-group-item user-set">账号设置</a>
                            <a href="#" class="list-group-item user-qus">常见问题</a>
                            <a href="#" class="list-group-item user-login-out">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="source-main">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="media-box">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img src="../../images/source-img-f.png">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading source-title">设计与发现</h4>
                            <ul class="list-inline list-control">
                                <li>已报人数<span class="p-count">200人</span></li>
                                <li>课时总数<span class="source-tz">10课时</span></li>
                            </ul>
                            <p>设计是把一种计划、规划、设想通过某种形式传达出来的活动过程。人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。</p>
                            <strong class="media-price">￥ 99.00</strong><br>
                            <a href="#" class="btn buy-media-btn">立刻购买</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row source-ad-mrg">
            <div class="col-md-8">
                <div class="media-tabs-box">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#source-intro" aria-controls="source-intro" role="tab" data-toggle="tab">课程简介</a></li>
                        <li role="presentation"><a href="#source-catalog" aria-controls="source-catalog" role="tab" data-toggle="tab">课程目录</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade in active source-page1" id="source-intro">
                            <p>设计是把一种计划、规划、设想通过某种形式传达出来的活动过程。人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。</p>
                            <img src="../../images/intro-source-f.png">
                            <p class="p-add-mrg">设计是把一种计划、规划、设想通过某种形式传达出来的活动过程。人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。</p>
                            <img src="../../images/intro-source-s.png">
                        </div>
                        <div role="tabpanel" class="tab-pane fade source-page2" id="source-catalog">
                            <div class="list-group">
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                                <a href="#" class="list-group-item"><span class="lesson-period">课时1</span><span class="lesson-title">矢量图标的绘制与图层样式的应用</span><span class="lesson-duration">14:17</span><span class="btn view-source-btn">试看</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="main-right">
                    <h5>授课老师</h5>
                    <div class="media">
                        <div class="media-left">
                            <a href="#"><img src="../../images/teacher-head-img.png"></a>
                        </div>
                        <div class="media-body">
                            <p>任老师</p>
                            <p>主讲老师</p>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="#"><img src="../../images/teacher-head-img.png"></a>
                        </div>
                        <div class="media-body">
                            <p>任老师</p>
                            <p>主讲老师</p>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="#"><img src="../../images/teacher-head-img.png"></a>
                        </div>
                        <div class="media-body">
                            <p>任老师<p>
                            <p>主讲老师</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h4 class="foot-title">联系方式</h4>
                <ul class="my-list foot-list">
                    <li>010-5653 8600</li>
                    <li>北京市朝阳区大屯东路名人公寓</li>
                    <li>media@zhigan-mail.com</li>
                </ul>
                <h5 class="foot-title-se">中国青少年科技辅导员协会 合作网站</h5>
                <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
            </div>
            <div class="col-md-3">
                <div class="col-xs-10">
                    <img src="../../images/index-wc-icon.png">
                    <a class="back-top" href="#"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script>
    $(function(){
        $(".list-group-item").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("check").siblings().removeClass("check");
        }) ;
    });
</script>
</body>
</html>